<template>
  <el-main style="padding: 0;">
    <el-header style="background-color: #e6f7ff;">
      <el-menu :default-active="activeIndex" class="el-menu-demo" style="background-color: #e6f7ff;"
               mode="horizontal" @select="handleSelect">
        <el-menu-item v-for="category in type" :key="category.type"  :index="String(category.type)" >
          {{ category.sort }}
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <div class="card-container">
        <div v-for="card in currentCards" :key="card.id" class="card">
          <div class="cell_main">
            <video :src="getVideoUrl(card.video)" controls></video>
          </div>
          <div class="cell_footer">
            <span id="name">{{ card.name }}</span>
            <br />
          </div>
        </div>
      </div>
      <!-- 分页条 -->
      <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
          :total="currentCards.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-main>
  </el-main>
</template>

<script>
import axios from 'axios';

export default {
  name: "mainHomeView",
  data() {
    return {
      activeIndex: '1',
      type: [],
      cards: []
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      this.fetchVideosByType(key);
    },
    handleSizeChange() {
    },
    handleCurrentChange() {
    },
    getVideoUrl(video) {
      console.log("getURL的 "+video);
      return `${video}`;
    },
    async fetchAllTypes() {
      try {
        const response = await axios.get('http://localhost:8080/video/types-all');
        this.type = response.data.data;
      } catch (error) {
        console.error('获取分类数据失败', error);
      }
    },
    async fetchVideosByType(typeId) {
      try {
        const response = await axios.get(`http://localhost:8080/video/get-type/${typeId}`);
        this.$set(this.cards, typeId, response.data.data);
      } catch (error) {
        console.error('获取视频数据失败', error);
      }
    }
  },
  computed: {
    currentCards() {
      return this.cards[this.activeIndex] || [];
    }
  },
  mounted() {
    this.fetchAllTypes().then(() => {
      if (this.type.length > 0) {
        this.fetchVideosByType(this.type[0].type);
        console.log('typeID是：'+this.type[0].type);

      }
    });
  }
};
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  width: calc(20% - 20px);
  margin: 10px;
}
.cell_main {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.cell_main video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cell_footer {
  width: 100%;
  height: 71px;
}
.card-container {
  background: white;
}
#name {
  font-size: 28px;
  font-family: 'Courier New', Courier, monospace;
}
a {
  text-decoration: none;
  color: black;
}
</style>
